<div class="performance">
  <div class="performance-container">
    <header>
<div class="time-choose">
<div class="time-spans">
<span class="time">
<span (click)=onClickHeader(0) [ngClass]="{on:active==0}">年</span>
<span (click)=onClickHeader(1) [ngClass]="{on:active==1}">月</span>
<span (click)=onClickHeader(2) [ngClass]="{on:active==2}">日</span>            
</span>
<span>
<span>选择时间：</span>
<span *ngIf="active==1 || active==0">   
<select class="year" [ngModel]="currentYear" (ngModelChange)="onChangeYear($event)">
<option [value]="year" *ngFor="let year of years" > {{year}} </option>               
</select>
年
</span>
<span *ngIf="active==1">   
<select class="month" [ngModel]="currentMonth" (ngModelChange)=" onChangeMonth($event)">
<option [value]="month" *ngFor="let month of months" > {{month}}</option>               
</select>
月
</span>
<span *ngIf="active==2">  
<p-calendar [locale]="en" [(ngModel)]="day" (ngModelChange)=" onChangeDay($event)" hourFormat="24"></p-calendar>
</span>
<span>   
<select class="rank" [ngModel]="currentRank" (ngModelChange)=" onChangeRank($event)">
<option [value]="rank" *ngFor="let rank of ranks" > {{rank}}</option>         
</select>
<input type="number" min="3" max="100" [(ngModel)]="rankValue">
名
</span>
</span>
<span>
<button class="button-trend" (click)="onSearch()">确定</button>
</span>
</div>
</div>

<div class="lose-item">
<div class="time-btn">
<span [ngClass]="{on:quotaType==0}" (click)="onClickQuota(0)">发电量</span>
<span [ngClass]="{on:quotaType==1}" (click)="onClickQuota(1)">损失电量</span>
<span [ngClass]="{on:quotaType==2}" (click)="onClickQuota(2)">风速</span>   
<span [ngClass]="{on:quotaType==3}" (click)="onClickQuota(3)">可利用率</span>
          <span [ngClass]="{on:quotaType==4}" (click)="onClickQuota(4)">可利用小时</span>
</div>
</div>
</header>

<div class="main">
<!--年  -->
<div [ngClass]="{'main-content':true, active:active==0}">
<section class="farm">
<!-- 公司风场年度 -->
<div class="title">
<p>{{ currentYear }}年各风场{{ quotaTypeStr }}排名</p>
</div>
<div class="farm-column">
 <app-quota-echarts [quotaName]="quotaTypeUtil" (onFarmColumnClick)="onFarmColumnClick($event)" [xAxisData]="yearFarmXAxis" [series]="yearFarmSeries"></app-quota-echarts> 
</div>
</section>

<section class="turbine">
<!-- 公司风机年度 -->
<div class="title">
<p>{{ currentYear }}年各风机{{ quotaTypeStr }}排名</p>
</div>
<div class="turbine-column">
 <app-quota-echarts [quotaName]="quotaTypeUtil2" [xAxisData]="yearTurbXAxis" [series]="yearTurbSeries"></app-quota-echarts> 
</div>
</section>
</div>

<!--月  -->
<div class="main-content" [ngClass]="{'main-content':true, active:active==1}">
<section class="farm">
<!-- 公司风场年度 -->
<div class="title">
<p>{{ currentYear }}年各风场{{ currentMonth }}月份{{ quotaTypeStr }}排名</p>
</div>
<div class="farm-column">
 <app-quota-echarts [quotaName]="quotaTypeUtil" (onFarmColumnClick)="onFarmColumnClick($event)" [xAxisData]="monthFarmXAxis" [series]="monthFarmSeries"></app-quota-echarts> 
</div>
</section>

<section class="turbine">
<div class="title">
<p>{{ currentYear }}年各风机{{ currentMonth }}月份{{ quotaTypeStr }}排名</p>
</div>
<div class="turbine-column">
 <app-quota-echarts [quotaName]="quotaTypeUtil2"  [xAxisData]="monthTurbXAxis" [series]="monthTurbSeries"></app-quota-echarts> 
</div>
</section>
      </div>
      
      <!--日  -->
<div class="main-content" [ngClass]="{'main-content':true, active:active==2}">
<section class="farm">
<!-- 公司风场年度 -->
<div class="title">
<p>{{ currentDay }}各风场{{ quotaTypeStr }}排名</p>
</div>
<div class="farm-column">
 <app-quota-echarts [quotaName]="quotaTypeUtil" (onFarmColumnClick)="onFarmColumnClick($event)" [xAxisData]="dayFarmXAxis" [series]="dayFarmSeries"></app-quota-echarts> 
</div>
</section>

<section class="turbine">
<div class="title">
<p>{{ currentDay }}各风机{{ quotaTypeStr }}排名</p>
</div>
<div class="turbine-column">
 <app-quota-echarts [quotaName]="quotaTypeUtil2" [xAxisData]="dayTurbXAxis" [series]="dayTurbSeries"></app-quota-echarts> 
</div>
</section>
</div>

    </div> 
  </div>
</div>
